{% extends "base/base.html" %}
{% block content %}

<div class="row">
    <div class="span3">
        <div class="well" style="padding: 8px 0;">
            <ul class="nav nav-list">
                <li class="nav-header">
                    Encabezado de lista
                </li>
                <li class="active">
                    <a href="#"><i class="icon-white icon-home"></i> Home</a>
                </li>
                <li>
                    <a href="#"><i class="icon-book"></i> Librería</a>
                </li>
                <li>
                    <a href="#"><i class="icon-pencil"></i> Aplicaciones</a>
                </li>
                <li class="nav-header">
                    Otro encabezado de lista
                </li>
                <li>
                    <a href="#"><i class="icon-user"></i> Perfil</a>
                </li>
                <li>
                    <a href="#"><i class="icon-cog"></i> Ajustes</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#"><i class="icon-flag"></i> Ayuda</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="span3">
        <div class="well">
            <a href="#" id="example" class="btn btn-danger" rel="popover"
            data-content="Contenido index.html tienes un contenido genial. ¿verdad que es atractivo?"
            data-original-title="Index PopOver">Deseas Cancelar?</a>
            <p>
                &nbsp;
            </p>
            <div class="btn-group">
                <button class="btn">
                    Action
                </button>
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#"><i class="icon-user"></i> Perfil</a>
                    </li>
                    <li>
                        <a href="#"><i class="icon-cog"></i> Ajustes</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#"><i class="icon-flag"></i> Ayuda</a>
                    </li>
                </ul>
            </div>
            <p>
                &nbsp;
            </p>
            <div class="btn-group">
                <button class="btn btn-primary">
                    Acción
                </button>
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Otra acción</a>
                    </li>
                    <li>
                        <a href="#">Algo más aquí</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Enlace separado</a>
                    </li>
                </ul>
            </div>
            <div id="myModal" class="modal hide fade" style="display: none; ">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>Modal Heading</h3>
                </div>
                <div class="modal-body">
                    <h4>Text in a modal</h4>
                    <p>
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.
                    </p>

                    <h4>Popover in a modal</h4>
                    <p>
                        This <a href="#" class="btn popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on hover.
                    </p>

                    <h4>Tooltips in a modal</h4>
                    <p>
                        <a href="#" class="tooltip-test" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-original-title="Tooltip">that link</a> should have tooltips on hover.
                    </p>

                    <hr>

                    <h4>Overflowing text to show optional scrollbar</h4>
                    <p>
                        We set a fixed
                        <code>
                            max-height
                        </code>
                        on the
                        <code>
                            .modal-body
                        </code>
                        . Watch it overflow with all this extra lorem ipsum text we've included.
                    </p>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
                    <a href="#" class="btn btn-primary" data-dismiss="modal">Guardar cambios</a>
                </div>
            </div>
            <p>
                &nbsp;
            </p>
            <a data-toggle="modal" href="#myModal" class="btn btn-custom">Activar demo modal</a>
        </div>
    </div>
    <div class="span6">
        <h2>Galeria</h2>
        <p>
            Muestras de fotos..
        </p>
        <ul class="thumbnails">
            <li class="span3">
                <a href="#" class="thumbnail"> <img src="{{STATIC_URL}}img/logo_victoria.png" alt=""> </a>
            </li>
            <li class="span3">
                <a href="#" class="thumbnail"> <img src="{{STATIC_URL}}img/bg-body.jpg" alt=""> </a>
            </li>
        </ul>

        <div class="alert alert-info">
            <a class="close" data-dismiss="alert">×</a>
            <h4 class="alert-heading">Informacion!</h4>
            Aqui se puede mostrar informacion...
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="span4">
        <h3>Column #1</h3>
        <p>
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#1" data-toggle="tab">Section 1</a>
                    </li>
                    <li>
                        <a href="#2" data-toggle="tab">Section 2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="1">
                        <p>
                            <div class="btn-group">
                                <button class="btn">
                                    Action
                                </button>
                                <button class="btn dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#"><i class="icon-user"></i> Perfil</a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="icon-cog"></i> Ajustes</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="#"><i class="icon-flag"></i> Ayuda</a>
                                    </li>
                                </ul>
                            </div>
                        </p>
                    </div>
                    <div class="tab-pane" id="2">
                        <p>
                            <div class="btn-group">
                                <button class="btn btn-primary">
                                    Acción
                                </button>
                                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">Action</a>
                                    </li>
                                    <li>
                                        <a href="#">Otra acción</a>
                                    </li>
                                    <li>
                                        <a href="#">Algo más aquí</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="#">Enlace separado</a>
                                    </li>
                                </ul>
                            </div>
                        </p>
                    </div>
                </div>
            </div>
        </p>
    </div>
    <div class="span4">
        <h1>Column #2</h1>
        <p>
            Content for column #2.
        </p>
    </div>
    <div class="span4">
        <h1>Column #3</h1>
        <p>
            Content for column #3.
        </p>
    </div>
</div>
<br>
<div class="row">
    <div class="span4">
        <h1>Column #1</h1>
        <p>
            Content for column #1.
        </p>
    </div>
    <div class="span3">
        <div class="progress progress-striped active">
            <div class="bar" style="width: 90%;"></div>
        </div>
    </div>
    <div class="span3 offset1">
        <h1>Column #3</h1>
        <p>
            Content for column #3.
        </p>
    </div>
</div>
<br>
<blockquote>
    <p>
        Las monedas de 50 centavos... son como las de 50 centavos =)
    </p>
    <small>Ivanus</small>
</blockquote>
<div class="row">
    <div class="span3">
        <ul>
            <li>
                Lorem ipsum dolor sit amet
            </li>
            <li>
                Consectetur adipiscing elit
            </li>
        </ul>
    </div>
    <div class="span3">
        <ol>
            <li>
                Lorem ipsum dolor sit amet
            </li>
            <li>
                Consectetur adipiscing elit
            </li>
        </ol>
    </div>
    <div class="span3">
        <ul class="unstyled">
            <li>
                Lorem ipsum dolor sit amet
            </li>
            <li>
                Consectetur adipiscing elit
            </li>
        </ul>
    </div>
    <div class="span3">
        <dl>
            <dt>
                Lorem ipsum
            </dt>
            <dd>
                Lorem ipsum dolor sit amet
            </dd>
            <dt>
                Consectetur
            </dt>
            <dd>
                Consectetur adipiscing elit
            </dd>
        </dl>
    </div>
</div>
<br>
<div class="row">
    <div class="span6">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Language</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Some</td>
                    <td>One</td>
                    <td>English</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Joe</td>
                    <td>Sixpack</td>
                    <td>English</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Stu</td>
                    <td>Dent</td>
                    <td>Code</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="span6">
        <table class="table">
            <thead>
                <tr>
                    <th># 2</th>
                    <th>First Name 2</th>
                    <th>Last Name 2</th>
                    <th>Language 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Some</td>
                    <td>One</td>
                    <td>English</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Joe</td>
                    <td>Sixpack</td>
                    <td>English</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Stu</td>
                    <td>Dent</td>
                    <td>Code</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<br>
<div class="row">
    <div class="span6">
        <form class="well">
            <label>Nombre:</label>
            <input type="text" class="span3" placeholder="Ingresa tu nombre…">
            <span class="help-inline">Texto de ayuda asociado!</span>
            <input type="color">
            <div class="control-group">
                <label class="checkbox">
                    <input type="checkbox">
                    Check me out </label>
                <div class="clearfix">
                    <label>Pais:</label>
                    <div class="input">
                        <select>
                            <option>Alemania</option>
                            <option>Guatemala</option>
                            <option>Ecuador</option>
                            <option>Mexico</option>
                            <option>Colombia</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="fileInput">input (de archivo)</label>
                <div class="controls">
                    <input class="input-file" id="fileInput" type="file">
                </div>
            </div>
            <div class="control-group success">
                <label class="control-label" for="inputSuccess">Input con mensaje de éxito</label>
                <div class="controls">
                    <input type="text" id="inputSuccess">
                    <span class="help-inline">Perfecto!</span>
                </div>
            </div>
            <div class="control-group">
                <label class="checkbox">
                    <input type="checkbox">
                    Check me out </label>
            </div>
            <button type="submit" class="btn">
                Enviar
            </button>
        </form>
    </div>
    <div class="span6">
        <form class="well form-inline">
            <input type="text" class="input-medium" placeholder="Email">
            <input type="password" class="input-small" placeholder="Password">
            <label class="checkbox">
                <input type="checkbox">
                Recordar </label>
            <button type="submit" class="btn">
                Entrar
            </button>
        </form>
        <form class="well">
            <div class="btn-group">
                <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"> Danger <span class="caret"></span> </a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Action</a>
                    </li>
                    <li>
                        <a href="#">Another action</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
            <br>
            <div class="btn-group">
                <button class="btn">
                    Left
                </button>
                <button class="btn">
                    Middle
                </button>
                <button class="btn">
                    Right
                </button>
            </div>
        </form>
    </div>
</div>
<div class="row">
    <div class="span8">
        <iframe src="http://www.youtube.com/embed/An6-Ai49X44"
        width="600" height="305" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="span4 pull-right">
        <h2>El Cid de Capricornio</h2>
        <p>
            Video tipo trailer de la pelea entre El cid de Capricornio contra
            los Dioses del Sueño con ayuda del santo Tenma de Pegaso.
        </p>
    </div>
</div>
<p>
    &nbsp;
</p>
<div class="btn-group">
    <button class="btn btn-primary">
        Acción
    </button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">Action</a>
        </li>
        <li>
            <a href="#">Otra acción</a>
        </li>
        <li>
            <a href="#">Algo más aquí</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">Enlace separado</a>
        </li>
    </ul>
</div>
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active left">
            <img src="{{STATIC_URL}}img/logo_victoria.png" alt="">
            <div class="carousel-caption">
                <h4>Primera eitqueta de miniatura de imagen (thumbnail)</h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
        <div class="item next left">
            <img src="{{STATIC_URL}}img/bg-body.jpg" alt="">
            <div class="carousel-caption">
                <h4>Segunda eitqueta de miniatura de imagen (thumbnail)</h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
        <div class="item">
            <img src="{{STATIC_URL}}img/main-light.png" alt="">
            <div class="carousel-caption">
                <h4>Tercera eitqueta de miniatura de imagen (thumbnail)</h4>
                <p>
                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
{% endblock %}